<template>
  <div class="box-full flex-col bgfff box-border round-4 px-20 overflow-hidden pb-14">
    <div class="flex flex-a-c flex-j-b w-full mb-20 pt-20 pr-20">
      <a-input-search
        allow-clear
        style="width: 70%"
        size="large"
        placeholder="输入群名称检索"
        v-model="searchValue"
      />
      <a-button
        type="primary"
        size="large"
        :loading="loading"
        @click="emit('getPersonalGroupList', true)"
      >
        <template #icon>
          <icon-sync />
        </template>
        刷新源头群
      </a-button>
    </div>
    <div class="w-full flex-1 m-relative">
      <div class="m-absolute t-0 b-0 r-0 l-0 overflow-hidden" ref="tableBox">
        <a-table
          :columns="columns"
          :data="tableData"
          :show-header="false"
          row-key="wxid"
          :bordered="false"
          :loading="loading"
          :pagination="false"
          :scroll="{ y: '100%' }"
        >
          <template #groupInfo="{ rowIndex, record }">
            <div class="flex flex-a-c">
              <div class="w-30 mr-20 flex flex-j-c">{{ rowIndex + 1 }}</div>
              <a-image
                width="42"
                height="42"
                class="mx-4"
                :preview="false"
                style="border-radius: 4px"
                :src="record.avatar"
              />
              <span class="ml-6">{{ record.nickname }}</span>
            </div>
          </template>
          <template #action="{ record }">
            <div class="flex flrex-a-c flex-j-e">
              <a-button
                class="ml-14"
                type="primary"
                @click="memberModalRef?.openMemberModal(record)"
              >
                <template #icon>
                  <span class="iconfont icon-jiaosequnti text-size-24 mr-6 textfff"></span>
                </template>
                <template #default>群成员</template>
              </a-button>
            </div>
          </template>
        </a-table>
      </div>
    </div>
    <member-modal ref="memberModalRef"></member-modal>
  </div>
</template>
<script setup>
import { IconSync } from '@arco-design/web-vue/es/icon'
import MemberModal from './member.vue'
const props = defineProps(['personalGroupList'])
const emit = defineEmits(['getPersonalGroupList'])
const loading = ref(false)
const tableBox = ref()
const memberModalRef = ref()
const searchValue = ref()
const columns = [
  {
    title: '群信息',
    slotName: 'groupInfo'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]

const tableData = computed(() => {
  if (searchValue.value) {
    return props.personalGroupList.filter((item) => item.nickname.includes(searchValue.value))
  } else {
    return props.personalGroupList.slice() // 使用 slice() 创建 tableDataO 的浅拷贝
  }
})
</script>
